<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>


<table class="layui-hide" id="test" lay-filter="test2"></table>

<script type="text/html" id="toolbarDemo">

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="addProduct">添加商品</button>
    </div>
</script>

<!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    // 获取上一个链接中的值
    function getUrlParam(name) {
        var url = window.location.href;
        if (url != null && url.indexOf("?") !== -1) {
            var url_param = url.split("?")[1];
            var url_param_arr = url_param.split("&");
            for (var i = 0; i < url_param_arr.length; i++) {
                var tempParam = url_param_arr[i];
                var paramName = tempParam.split("=")[0];
                if (paramName === name) {
                    return tempParam.split("=")[1]
                }
            }
        }
        return null;
    }

    layui.use('table', function () {

        var table = layui.table;
        let rid = getUrlParam("rid");
        $("#toolbarDemo").prepend("<h2>" + rid + "号订单</h2>")
        table.render({
            id: 'test',
            elem: '#test'
            , url: '/api/order/orderdetails?rid=' + rid,
            request: {
                pageName: 'current', limitName: 'size'
            }
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

            , title: '订单详情'
            , cols: [[
                {field: 'xid' },
                {field: 'pname', title: '商品名称', fixed: 'left'}
                , {field: 'parea', title: '商品产地'}
                , {field: 'yname', title: '产品年份'}
                , {field: 'count', title: '产品数量'}
                , {field: 'price', title: '出售价格'}
                , {field: 'money', title: '小计'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true,
            limits: [5, 10, 15, 20, 25, 50, 100],
            limit: 5
        });


        // 往订单中添加商品
        $("#addProduct").on("click", () => {
            //添加后刷新表格
            layer.open({
                type: 2 //此处以iframe举例
                , title: '添加商品'
                , area: ['200', '420px']
                , shade: 0
                , maxmin: true
                , content: '/page/add-product-toOrder.html'
                , btn: ['提交', '关闭']
                , yes: function (index) {

                    var data = window['layui-layer-iframe' + index].getValue();
                    //设置订单编号
                    data.rId = rid;
                    /**
                     alert(!!undefined)//false
                     alert(!!null)//false
                     alert(!!0)//false
                     alert(!!"")//false
                     */

                    //校验参数
                    console.log(data);

                    if (!data.rId) {
                        layer.msg("产品类型不能为空");
                        return false;
                    }
                    if (!data.pId) {
                        layer.msg("产品名称不能为空");
                        return false;
                    }

                    if (!data.yId) {
                        layer.msg("产品年份不能为空");
                        return false;
                    }

                    if (!data.xPrice) {
                        layer.msg("出货价格不能为空");
                        return false;
                    }
                    if (!data.xCount) {
                        layer.msg("购买数量不能为空");
                        return false;
                    }
                    //发送新增请求
                    $.post({
                        url: "/api/ordermx/",
                        data: data,
                        success: (resp) => {
                            //post请求执行成功的回调
                            if (resp.code === 1) {
                                layer.close(index);
                                //刷新表格
                                table.reload('test', {
                                    url: '/api/order/orderdetails?rid=' + rid
                                });
                                layer.msg("新增成功");
                            } else {
                                layer.msg(resp.msg)
                            }
                        }, dataType: "json"
                    });
                }
                , btn2: function (index) {//5
                    layer.close(index);
                }
            });
        });


        //监听行工具事件
        table.on('tool(test2)', function (obj) {
            var data = obj.data;

            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {

                    //发个删除请求
                    $.get({
                        url: "/api/ordermx/delete/"+obj.data.xid,
                        success: (resp) => {
                            //post请求执行成功的回调
                            if (resp.code === 1) {
                                layer.close(index);
                                //刷新表格
                                table.reload('test', {
                                    url: '/api/order/orderdetails?rid=' + rid
                                });
                                layer.msg("删除成功");
                            } else {
                                layer.msg(resp.msg)
                            }
                        }, dataType: "json"
                    });



                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });


</script>
</body>
</html>